<template>
  <div class="tags">
    <el-tag 
    v-for="(tag,index) in tags"
    :key="tag.name" 
    :closable="tag.name !== 'home'" 
    :effect="route.name === tag.name?'dark':'plain'"
    @click="handleMenu(tag)"
    @close="handleClose(tag,index)">
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, effect, computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import {userAllDateStore} from '@/stores'

const store = userAllDateStore()

const tags = computed(()=>store.state.tags)
const route = useRoute()    // 查阅信息
const router = useRouter()   // 路由跳转

const handleMenu = (tag)=>{
    router.push(tag.name)
    store.selectMenu(tag)
}

const handleClose = (tag,index)=>{
    // 通过pinia进行管理
    store.updateTags(tag)
    // 如果点击关闭tag不是当前页面，直接关闭
    // 如果关闭当前页面且当前标签，跳转到前一个
    if(tag.name !== route.name) return
    if(index == store.state.tags.length){
        store.selectMenu(tags.value[index - 1])
        router.push(tags.value[index - 1].name)
    }else{
        store.selectMenu(tags.value[index])
        router.push(tags.value[index].name)
    }
    
}
</script>

<style scoped lang="less">
.tags {
    margin: 10px 0 0 20px;
    .el-tag{
        margin-right: 10px;
        cursor: pointer;
    }
}
</style>